import styles from './index.module.less';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination, Autoplay } from 'swiper/modules';

import part1 from '../../../assets/part1.png';
import part2 from '../../../assets/part2.png';
import part3 from '../../../assets/part3.png';
import part4 from '../../../assets/part4.png';
import part5 from '../../../assets/part5.png';
import part6 from '../../../assets/part6.png';
import part7 from '../../../assets/part7.png';
import part8 from '../../../assets/part8.png';
import part9 from '../../../assets/part9.png';
import part10 from '../../../assets/part10.png';
import part11 from '../../../assets/part11.png';
import part12 from '../../../assets/part12.png';
import part13 from '../../../assets/part13.png';
import part14 from '../../../assets/part14.png';
import part15 from '../../../assets/part15.png';
import part16 from '../../../assets/part16.png';
import part17 from '../../../assets/part17.png';
import part18 from '../../../assets/part18.png';
import part19 from '../../../assets/part19.png';
import part20 from '../../../assets/part20.png';
import part21 from '../../../assets/part21.png';
import part22 from '../../../assets/part22.png';
import part23 from '../../../assets/part23.png';
import part24 from '../../../assets/part24.png';
import vectorImg from '../../../assets/vector2.svg';
import { useEffect, useState } from 'react';

const Partner = () => {
  const [slidesPerView, setSlidesPerView] = useState(5);
  useEffect(() => {
    if (window.innerWidth < 768) {
      setSlidesPerView(2);
    }
  }, []);
  return (
    <div className={styles.wrap} id='partner'>
      <div className={styles.sessions}>
        <div className={styles.title}>Our Partners</div>
        <img src={vectorImg} className={styles.line} />
        <Swiper
          slidesPerView={slidesPerView}
          className={styles.swiper}
          spaceBetween={35}
          pagination={{
            clickable: true,
          }}
          autoplay={{
            delay: 2500,
            disableOnInteraction: false,
          }}
          modules={[Pagination, Autoplay]}
        >
          <SwiperSlide className={styles.slide}>
            <img className={styles.slideImg} src={part1} />
          </SwiperSlide>
          <SwiperSlide className={styles.slide}>
            <img className={styles.slideImg} src={part2} />
          </SwiperSlide>
          <SwiperSlide className={styles.slide}>
            <img className={styles.slideImg} src={part3} />
          </SwiperSlide>
          <SwiperSlide className={styles.slide}>
            <img className={styles.slideImg} src={part4} />
          </SwiperSlide>
          <SwiperSlide className={styles.slide}>
            <img className={styles.slideImg} src={part5} />
          </SwiperSlide>
          <SwiperSlide className={styles.slide}>
            <img className={styles.slideImg} src={part6} />
          </SwiperSlide>
          <SwiperSlide className={styles.slide}>
            <img className={styles.slideImg} src={part7} />
          </SwiperSlide>
          <SwiperSlide className={styles.slide}>
            <img className={styles.slideImg} src={part8} />
          </SwiperSlide>
          <SwiperSlide className={styles.slide}>
            <img className={styles.slideImg} src={part9} />
          </SwiperSlide>
          <SwiperSlide className={styles.slide}>
            <img className={styles.slideImg} src={part10} />
          </SwiperSlide>
          <SwiperSlide className={styles.slide}>
            <img className={styles.slideImg} src={part11} />
          </SwiperSlide>
          <SwiperSlide className={styles.slide}>
            <img className={styles.slideImg} src={part12} />
          </SwiperSlide>
          <SwiperSlide className={styles.slide}>
            <img className={styles.slideImg} src={part13} />
          </SwiperSlide>
          <SwiperSlide className={styles.slide}>
            <img className={styles.slideImg} src={part14} />
          </SwiperSlide>
          <SwiperSlide className={styles.slide}>
            <img className={styles.slideImg} src={part15} />
          </SwiperSlide>
          <SwiperSlide className={styles.slide}>
            <img className={styles.slideImg} src={part16} />
          </SwiperSlide>
          <SwiperSlide className={styles.slide}>
            <img className={styles.slideImg} src={part17} />
          </SwiperSlide>
          <SwiperSlide className={styles.slide}>
            <img className={styles.slideImg} src={part18} />
          </SwiperSlide>
          <SwiperSlide className={styles.slide}>
            <img className={styles.slideImg} src={part19} />
          </SwiperSlide>
          <SwiperSlide className={styles.slide}>
            <img className={styles.slideImg} src={part20} />
          </SwiperSlide>
          <SwiperSlide className={styles.slide}>
            <img className={styles.slideImg} src={part21} />
          </SwiperSlide>
          <SwiperSlide className={styles.slide}>
            <img className={styles.slideImg} src={part22} />
          </SwiperSlide>
          <SwiperSlide className={styles.slide}>
            <img className={styles.slideImg} src={part23} />
          </SwiperSlide>
          <SwiperSlide className={styles.slide}>
            <img className={styles.slideImg} src={part24} />
          </SwiperSlide>
        </Swiper>
      </div>
    </div>
  );
};

export default Partner;